<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        
    </div>

    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <!-- <script>
        const TitleElement = React.createElement("h1",{title:"hello"},"React示例");
        const ContentElement = React.createElement("p",null,"文本内容");
        const DivElement = React.createElement("div",null,TitleElement,ContentElement);

        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(DivElement);
    </script> -->
    <script type="text/babel">
        // 在页面上显示26个字母卡片
        // const TitleElement = function(props){
        //     return <h1 title={props.a}>React示例</h1>
        // }
        // const ContentElement = function(props){
        //     return (
        //         <p style={{color:props.color}}>{props.children}</p>
        //     )
        // }
        // const DivElement = function(){
        //     let text = "测试";
        //     let style = {
        //         color:"red",
        //         border:"1px solid blue"
        //     }
        //     let ary = [];
        //     for(let i = 0;i < 10;i++){
        //         ary.push(<ContentElement color="red" key={i}>文本内容{i}</ContentElement>);
        //     }
        //     return <div >
        //         <label style={style}>{text}</label>
        //         <TitleElement a="标题"></TitleElement>
        //         {ary}                
        //     </div>
        // }
        
        class TitleElement extends React.Component{
            constructor(props){
                super(props);
            }
            render(){
                return <h1>标题</h1>
            }
        }
        class DivElement extends React.Component{
            constructor(props){
                super(props);
            }
            render(){
                return <TitleElement></TitleElement>
            }
        }
       
        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(<DivElement></DivElement>);
    </script>
</body>
</html>